<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>lazysizes - the restful responsive image service extension/plugin </title>

	<link href="../assets/css/tidy.css" rel="stylesheet" />
	<style>
		.thumbnail img {
			width: 100%;
			height: auto;
		}
		.intrinsic {
			position: relative;
			padding-bottom: 66.6%;
			height: 0;
		}

		.intrinsic-square {
			padding-bottom: 100%;
		}
		.intrinsic img,
		.intrinsic iframe,
		.intrinsic .lazyload {
			position:absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			border: none;
			overflow: hidden;
		}
		pre {
			-moz-tab-size: 2;
			tab-size: 2;
		}

		.tall img {
			--ls-aspectratio: 0.5;
		}
		.wide img {
			--ls-aspectratio: 2;
		}
	</style>

	<script>

		window.lazySizesConfig = window.lazySizesConfig || {};
		window.lazySizesConfig.rias = window.lazySizesConfig.rias || {};
		window.lazySizesConfig.loadMode = 1;
		window.lazySizesConfig.preloadAfterLoad = true;
	</script>
	<script src="../lazysizes.min.js"></script>
	<script src="../plugins/optimumx/ls.optimumx.min.js"></script>

	<script src="../plugins/rias/ls.rias.min.js"></script>
</head>
<body>

<div class="container">


	<div class="jumbotron">
		<h1>lazySizes - <abbr title="Responsive Image as Service">RIaS</abbr> plugin</h1>
		<p>The <strong>Responsive Image as Service</strong> plugin enables lazySizes to generate the best suitable image source based on an URL pattern. It works with pre-build images (i.e. grunt-responsive-images) as also with any third party or self hosted REST like image API / image on demand service.</p>
		<p>For a short but <a href="https://github.com/aFarkas/lazysizes/blob/gh-pages/plugins/rias/">full API description go to the readme.md</a>.</p>
	</div>

	<div id="examples">
		<div class="row">
			<div class="col-sm-6">
				<div class="thumbnail">
					<div class="intrinsic intrinsic-square">
						<img
							 src="http://placehold.it/100"
							 data-src="http://placehold.it/{width}"
							 data-sizes="auto"
							 class="lazyload"
							 alt="" />
					</div>
				</div>
			</div>
			<div class="col-sm-6">
				<h3>Basic RIaS implementation</h3>
				<p>Include the ls.rias plugin right after your lazysizes script, add the <code>lazyload</code> class as usual and the <code>data-sizes="auto"</code> attribute.</p>
				<p>Inside of your <code>data-src</code> value include the <code>{width}</code> placeholder </p>
<pre>
&lt;script src="../lazysizes.js"&gt;&lt;/script&gt;
&lt;script src="../plugins/rias/ls.rias.js"&gt;&lt;/script&gt;

&lt;img
	src="http://placehold.it/100"
	data-src="http://placehold.it/{width}"
	data-sizes="auto"
	class="lazyload"
	alt="" /&gt;
</pre>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-6">
				<div class="thumbnail">
					<div class="tall">
						<img
							 src="http://placehold.it/100x100"
							 data-src="http://placehold.it/{width}x{height}"
							 data-sizes="auto"
							 class="lazyload"
							 alt="" />
					</div>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="thumbnail">
					<div class="wide">
						<img
							 src="http://placehold.it/200x100"
							 data-src="http://placehold.it/{width}x{height}"
							 data-sizes="auto"
							 class="lazyload"
							 alt="" />
					</div>
				</div>
			</div>
			<div class="col-sm-6">
				<h3>Aspect ratio</h3>
				<p>In addition, you can set the ascpect ratio of the image from CSS. You only need to set the custom CSS variable <code>--ls-aspectratio</code> on the <code>img</code> and add a <code>{height}</code> placeholder </p>
<pre>
&lt;style&gt;
		img.rectangle {
			--ls-aspectratio: 2;
		}
&lt;style/&gt;

&lt;img
	src="http://placehold.it/200x100"
	data-src="http://placehold.it/{width}x{height}"
	data-sizes="auto"
	class="lazyload rectangle"
	alt="" /&gt;
</pre>
			    <p>Note that you can also set the aspect ratio via a <code>data-aspectratio</code> value on the <code>img</code> tag.</p>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-6">
				<h3><abbr title="Responsive Image as Service">RIaS</abbr> and Art direction using the <code>picture</code> element</h3>
				<p>A responsive image service can be also combined with the art direction approach using the HTML5 <code>picture</code> element:</p>
<pre>&lt;picture>
&lt;!--[if IE 9]>&lt;audio&gt;&lt;![endif]--&gt;
&lt;source
		data-src="http://placehold.it/{width}/1111ee/fff"
		media="(max-width: 500px)" /&gt;
	&lt;source
			data-src="http://placehold.it/{width}/e8117f/fff"
			media="(max-width: 1090px)" /&gt;
	&lt;source
			data-src="http://placehold.it/{width}/7D26CD/fff"
			media="(min-width: 1224px)" /&gt;

&lt;!--[if IE 9]&gt;&lt;/audio&gt;&lt;![endif]--&gt;
&lt;img
		src="http://placehold.it/100"
		data-src="http://placehold.it/{width}"
		data-sizes="auto"
		class="lazyload"
		alt="" /&gt;
&lt;/picture&gt;
</pre>
			</div>
			<div class="col-sm-6">
				<div class="thumbnail">
					<div class="intrinsic intrinsic-square">
						<picture>
							<!--[if IE 9]><audio><![endif]-->
							<source
									data-src="http://placehold.it/{width}/1111ee/fff"
									media="(max-width: 500px)" />
							<source
									data-src="http://placehold.it/{width}/e8117f/fff"
									media="(max-width: 1090px)" />
							<source
									data-src="http://placehold.it/{width}/7D26CD/fff"
									media="(min-width: 1224px)" />

							<!--[if IE 9]></audio><![endif]-->
							<img
								src="http://placehold.it/100"
								data-src="http://placehold.it/{width}"
								data-sizes="auto"
								class="lazyload"
								alt="" />
						</picture>

					</div>
				</div>
			</div>


		</div>

		<div class="row">
			<div class="col-sm-6">
				<div class="thumbnail">
					<div class="intrinsic">
						<img
								src="http://app.resrc.it/S=W300M/O=20,B/http://www.your-site.co/image.jpg"
								data-src="http://app.resrc.it/S=W{width}M/O={quality},B/http://www.your-site.co/image.jpg"
								data-optimumx="1.3"
								data-quality="75"
								data-sizes="auto"
								class="lazyload"
								alt="" />
					</div>
				</div>
			</div>
			<div class="col-sm-6">
				<h3><code>optimumx</code></h3>
				<p>All options can be controlled globally through the <code>lazySizesConfig.rias</code> object or by using <code>data-*</code> attributes.</p>
				<p>The rias extension can also be combined with the <a href="https://github.com/aFarkas/lazysizes/blob/gh-pages/plugins/optimumx/"><code>optimumx</code> extension</a>. The optimumx feature helps you to constrain the maximum pixel density for an image.</p>
<pre>&lt;img
	data-src="image?width={width}&amp;amp;quality={quality}"
	data-quality="75"
	data-optimumx="1.5"
	class="lazyload"
	alt="" /&gt;
</pre>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-12">
				<div class="thumbnail">
					<div>
						<picture>
							<!--[if IE 9]><audio><![endif]-->
							<source
									data-src="http://app.resrc.it/C=W1050,H900/S=W{width}/http://www.your-site.co/image.jpg"
									media="(max-width: 800px)" />
							<source
									data-src="http://app.resrc.it/C=W1350,H1100,X100,Y100/S=W{width}/http://www.your-site.co/image.jpg"
									media="(max-width: 1200px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img
									src="http://app.resrc.it/S=W100/http://www.your-site.co/image.jpg"
									data-src="http://app.resrc.it/S=W{width}/http://www.your-site.co/image.jpg"
									data-sizes="auto"
									class="lazyload"
									alt="" />
						</picture>

					</div>
					<div class="caption">
						<h3><abbr title="Responsive Image as Service">RIaS</abbr> and Art direction using the <code>picture</code> element</h3>
						<p>A responsive image service can be also combined with the art direction approach using the HTML5 <code>picture</code> element.</p>
						<p>In this case, we simply use the cropping service</p>
					</div>
				</div>

			</div>
		</div>

	</div>
</div>
</body>
</html>
